<template>
	<headnav>
		<!-- 具名插槽 -->
		<template v-slot:left>
			<div>后退</div>
		</template>
		<template v-slot:center>
			<div>商品栏</div>
		</template>
		<template v-slot:right>
			<div>菜单</div>
		</template>
	</headnav>
	<swiper>
		<swiperitem v-for="(item,index) in banners" :key="index">
			<img :src="item.src" style="width:100%;height: 140px;"/>
		</swiperitem>
	</swiper>
	<Recommend :recommends="recommendinfor"></Recommend>
	<comnav :biaoti="comnavbt" @comtabclick="tabclick"></comnav>

	<betterscroll ref="scroll" @scroll="activeback">
		<commodity>
			<commodityitem v-for="(item,index) in commodityinfor[comnavxz].list" :key="index" @click="goodinfor">
				<template v-slot:img>
					<p>{{item.img}}</p>
				</template>
				<template v-slot:introduce>
					<p>{{item.introduce}}</p>
				</template>
				<template v-slot:pricezan>
					<p>{{item.price}}￥</p>
					<p>{{item.zancount}}</p>
				</template>
			</commodityitem>
		</commodity>
	</betterscroll>
	<scrolltop @click="backtop" v-show="activebacktop "></scrolltop>
</template>
<script>
	import headnav from '../components/public/HeadNav.vue'
	import Swiper from '../components/public/Swiper.vue'
	import Swiperitem from '../components/public/Swiperitem.vue'
	import Recommend from '../components/public/recommend.vue'
	import Comnav from '../components/public/Comnav.vue'
	import Commodity from '../components/public/commodityinfor.vue'
	import Commodityitem from '../components/public/commodityitem.vue'
	import Betterscroll from '../components/public/betterscroll.vue'
	import Scrolltop from '../components/public/Scrolltop.vue'
	export default {
		name: 'shouye',
		data() {
			return {
				activebacktop: false,
				banners: [{
						src: require('../images/rotation/1.jpg')
					},
					{
						src: require('../images/rotation/2.jpg')
					},
					{
						src: require('../images/rotation/3.jpg')
					}
				],
				recommendinfor: [{
						img: '1',
						name: 'one'
					},
					{
						img: '2',
						name: 'two'
					},
					{
						img: '3',
						name: 'three'
					},
					{
						img: '4',
						name: 'fore'
					}
				],
				comnavbt: ['推荐', '精品', '限时'],
				commodityinfor: {
					'TJ': {
						pyge: 1,
						list: [{
								img: '1',
								introduce: '这是袜子',
								price: '12',
								zancount: 123
							},
							{
								img: '2',
								introduce: '这是裤子',
								price: '50',
								zancount: 1234
							},
							{
								img: '3',
								introduce: '这是鞋子',
								price: '100',
								zancount: 12345
							},
							{
								img: '4',
								introduce: '这是帽子',
								price: '120',
								zancount: 123456
							},
							{
								img: '5',
								introduce: '这是衣服',
								price: '132',
								zancount: 123567
							},
							{
								img: '6',
								introduce: '这是台灯',
								price: '172',
								zancount: 123789
							},
						]
					},
					'JP': {
						pyge: 1,
						list: [{
								img: '7',
								introduce: '这是袜子',
								price: '12',
								zancount: 123
							},
							{
								img: '8',
								introduce: '这是裤子',
								price: '50',
								zancount: 1234
							},
							{
								img: '9',
								introduce: '这是鞋子',
								price: '100',
								zancount: 12345
							},
							{
								img: '10',
								introduce: '这是帽子',
								price: '120',
								zancount: 123456
							},
							{
								img: '11',
								introduce: '这是衣服',
								price: '132',
								zancount: 123567
							},
							{
								img: '12',
								introduce: '这是台灯',
								price: '172',
								zancount: 123789
							}
						]
					},
					'XS': {
						pyge: 1,
						list: [{
								img: '6',
								introduce: '这是袜子',
								price: '12',
								zancount: 123
							},
							{
								img: '7',
								introduce: '这是裤子',
								price: '50',
								zancount: 1234
							},
							{
								img: '8',
								introduce: '这是鞋子',
								price: '100',
								zancount: 12345
							},
							{
								img: '9',
								introduce: '这是帽子',
								price: '120',
								zancount: 123456
							},
							{
								img: '10',
								introduce: '这是衣服',
								price: '132',
								zancount: 123567
							},
							{
								img: '11',
								introduce: '这是台灯',
								price: '172',
								zancount: 123789
							}
						]
					}
				},
				comnavxz: 'TJ'
			}
		},
		components: {
			headnav,
			Swiper,
			Swiperitem,
			Recommend,
			Comnav,
			Commodity,
			Commodityitem,
			Betterscroll,
			Scrolltop
		},
		methods: {
			tabclick(index) {
				/*if(index==0){
					this.comnavxz='TJ'
				}else if(index==1){
					this.comnavxz='JP'
				}else {
					this.comnavxz='XS'
				}*/
				switch (index) {
					case 0:
						this.comnavxz = 'TJ'
						break
					case 1:
						this.comnavxz = 'JP'
						break
					case 2:
						this.comnavxz = 'XS'
						break
				}
			},
			//点击返回顶部
			backtop() {
				// 通过$refs.name拿到标签对象
				//console.log(this.$refs.scroll)
				this.$refs.scroll.bscrollTo(0, 0, 500)
			},
			//控制返回顶部按钮的出现 
			activeback(value) {
				if (value.y <= -200) {
					this.activebacktop = true
				} else {
					this.activebacktop = false
				}
			},
			//跳转到商品详情页
			goodinfor() {
				this.$router.push('/goodinfor')
			}
		},
		computed: {
			/*
			activated(){
				console.log('activated')
			},
			deactivated(){
				console.log('deactivated')
			}*/
		},
		//vue生命周期 组件卸载之前
		beforeUnmount() {
			console.log('leave home')
		},
		//vue生命周期 组件卸载
		unmounted() {
			console.log('leave home')
		},
	}
</script>
